<template>
  <div class="context">
    <!--搜索框-->
    <!-- <el-input style="width: 400px; margin: 20px 20px 20px 20px" v-model="inputValue" placeholder="请输入内容"
      prefix-icon="el-icon-search">
    </el-input> -->
    <div class="cardheard">

      <!-- <div style="margin-right: 15px; width:200px">
        <el-input placeholder="用户id" v-model="userid" class="input-with-select">
        </el-input>
      </div> -->
     
            <el-date-picker
              v-model="time"
              align="right"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
       
    
          <el-button type="success"  @click="selectByTime">查询</el-button>

      <!-- <el-button @click="UserInfo = true">导出EXCEL</el-button> -->

 
    </div>

    <template>
      <el-dialog title="选择导出" :visible.sync="UserInfo" width="20%" center>
        <div style="height: 200px;">
          <el-form label-width="80px">


            <el-form-item label="选择时间:" label-width="150">
              <div class="block">
         
                 
                  <el-date-picker
                    v-model="time"
                    align="right"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
                  </el-date-picker>
            
          
                <el-button type="success"  @click="selectByTime">查询</el-button>

                <div class="home">
                  <download-excel
                    class="export-excel-wrapper"
                    :data="execlData"
                    :fields="json_fields"
                    type="xls"
                    worksheet="My Worksheet"
                    name="订单数据"
                  >
                    <el-button style="margin:20px auto" type="success">确认导出EXCEL</el-button>
                  </download-excel>
                </div>

              </div>
            </el-form-item>

          </el-form>


    
        </div>

      </el-dialog>
    </template>




    <el-table :data="execlData" style="width: 100%" height="80%">
      <el-table-column type="index" width="50" >
      </el-table-column>
      <!-- <el-table-column label="ID">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column> -->

      <el-table-column label="用户id">
        <template slot-scope="scope">
          <span>{{ scope.row.userId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="用户小程序名称">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      
      <el-table-column label="用户刷次数">
        <template slot-scope="scope">
          <span>{{ scope.row.count }}</span>
        </template>
      </el-table-column>

            
      <el-table-column label="时间">
        <template slot-scope="scope">
          <span>{{ scope.row.time }}</span>
        </template>
      </el-table-column>


    </el-table>



  </div>
</template>

<script>
export default {
  data() {
    return {
      userid:"",
      execlData:[],
      json_fields: {
        时间: "time", //常规字段
        用户id: "userId", //支持嵌套属性
        用户小程序: "name", //支持嵌套属性
        刷机次数: "count", //常规字段

      },
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      time:"",
      UserInfo: false,//用户详情面板
      name:"",
      value: '',//数量
       data:[],
      formLabelWidth: "120px",
      newtable:{
        header:"",
        begin:"",
        end:""
      },
      dialogresetVisible:false,
      pagecount: 99,//查询的总数
      currentPage4:4,
      Users: [],//用户数据数组
      req: {
        "pageIndex": 0,
        "pageCount": 10
      }
    };
  },
  
  created() {

  },
  methods: {
    selectByTime(){
      var that = this;
      this.$axios.post("/api/Sys/readUserData", {
        "time": that.time,
        "userId":that.userid
      })
        .then(function (response) {
          console.log(response.data);
          if (response.data.code == 200) {
            that.$message.success("查询成功！共有："+response.data.pageCount+"条数据");
            that.execlData=response.data.data
          } else {
            that.$message.error(response.data.mes);
          }
        })
        .catch(function (error) {
          that.$message.error('网络链接超时！');
          console.log(error);
        });
    },
    download() {
        const data = XLSX.utils.json_to_sheet(this.items)
        const wb = XLSX.utils.book_new()
        XLSX.utils.book_append_sheet(wb, data, 'kalacloud-data')
        XLSX.writeFile(wb,'kalacloudExportExcel.xlsx')
      },

  }
};
</script>

<style scoped>

</style>
